<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="../static/style.css">
    <title>用户历史记录</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        header {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f0f0f0;
        }

        .logo img {
            max-width: 40px;
            height: auto;
        }

        .login button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #000000;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 20px;
        }

        .login button:hover {
            background-color: rgba(185, 176, 176, 0.19);
        }

        .button-container {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        .button-container button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .button-container button:hover {
            background-color: #0056b3;
        }

        .record-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
        }

        .record {
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #ccc;
            padding: 10px;
            width: 80%;
            max-width: 600px;
        }

        .image-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .image-container {
            flex: 1;
            text-align: center;
            padding: 10px;
        }

        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .button-row {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: 10px;
        }

        .button-row button {
            flex: 1;
            margin: 5px;
            padding: 10px;
            font-size: 14px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .button-row button:hover {
            background-color: #0056b3;
        }

        .pagination {
            text-align: center;
            margin-top: 20px;
        }

        .pagination button {
            padding: 10px 20px;
            font-size: 14px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            margin: 0 5px;
        }

        .pagination button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <a href="{{ url_for('webhomepage.webhomepage_view') }}">
                <img src="../static/projectImages/logo.png" alt="Logo">
            </a>
        </div>
        <div class="login">
            <button>{{ username }}</button>
        </div>
    </header>
    <div class="button-container">
        <button onclick="sortBy('time')">按时间排序</button>
        <button onclick="sortBy('format')">按文件格式排序</button>
    </div>
    <div class="record-container" id="recordContainer">
        <!-- Records will be dynamically added here -->
    </div>
    <script>
        // Sample records data (replace with actual data from backend if needed)
        const records = [
            { origin_image: 'image1_before.jpg', after_op_image: 'image1_after.jpg' },
            { origin_image: 'image2_before.jpg', after_op_image: 'image2_after.jpg' },
            // Add more records as needed
        ];

        // Function to render records based on current sort type
        function renderRecords(sortType) {
            let sortedRecords;
            if (sortType === 'time') {
                sortedRecords = records; // Example: Replace with actual sorting logic
            } else if (sortType === 'format') {
                sortedRecords = records; // Example: Replace with actual sorting logic
            }

            document.getElementById('recordContainer').innerHTML = '';

            sortedRecords.forEach(record => {
                const recordDiv = document.createElement('div');
                recordDiv.classList.add('record');

                const imageRow = document.createElement('div');
                imageRow.classList.add('image-row');

                const originContainer = document.createElement('div');
                originContainer.classList.add('image-container');
                const originImg = document.createElement('img');
                originImg.src = `uploads/origin_images/${record.origin_image}`;
                originImg.alt = 'Origin Image';
                originContainer.appendChild(originImg);
                imageRow.appendChild(originContainer);

                const afterContainer = document.createElement('div');
                afterContainer.classList.add('image-container');
                const afterImg = document.createElement('img');
                afterImg.src = `uploads/processed_images/${record.after_op_image}`;
                afterImg.alt = 'Processed Image';
                afterContainer.appendChild(afterImg);
                imageRow.appendChild(afterContainer);

                recordDiv.appendChild(imageRow);

                const buttonRow = document.createElement('div');
                buttonRow.classList.add('button-row');

                const downloadOriginBtn = document.createElement('button');
                downloadOriginBtn.innerText = '下载原图';
                downloadOriginBtn.onclick = function() {
                    window.location.href = `uploads/origin_images/${record.origin_image}`;
                };
                buttonRow.appendChild(downloadOriginBtn);

                const downloadProcessedBtn = document.createElement('button');
                downloadProcessedBtn.innerText = '下载处理图';
                downloadProcessedBtn.onclick = function() {
                    window.location.href = `uploads/processed_images/${record.after_op_image}`;
                };
                buttonRow.appendChild(downloadProcessedBtn);

                recordDiv.appendChild(buttonRow);

                document.getElementById('recordContainer').appendChild(recordDiv);
            });
        }

        renderRecords('time'); // Default to sorting by time

        function sortBy(type) {
            renderRecords(type);
        }
    </script>
</body>
</html>
